<!DOCTYPE html>
<html>
<head>
<title>Astroid Curve Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="450" height="450" style="border:1px solid #000000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const centerX = canvasWidth / 2;
    const centerY = canvasHeight / 2;
    const A_param = 150; // The parameter 'A' for the astroid, in pixels

    // --- Setup Canvas ---
    // Move origin to the center
    ctx.translate(centerX, centerY);
    // Flip the y-axis to have y increase upwards
    ctx.scale(1, -1);

    // --- Drawing Functions ---

    /**
     * Draws the X and Y axes.
     */
    function drawAxes() {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // X-axis
        ctx.moveTo(-canvasWidth / 2 + 20, 0);
        ctx.lineTo(canvasWidth / 2 - 20, 0);

        // Y-axis
        ctx.moveTo(0, -canvasHeight / 2 + 20);
        ctx.lineTo(0, canvasHeight / 2 - 20);

        ctx.stroke();
    }

    /**
     * Draws the astroid curve.
     */
    function drawAstroid() {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;

        const step = 0.01;
        for (let phi = 0; phi <= 2 * Math.PI + step; phi += step) {
            const x = A_param * Math.pow(Math.cos(phi), 3);
            const y = A_param * Math.pow(Math.sin(phi), 3);
            if (phi === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        ctx.stroke();
    }
    
    /**
     * Draws the small shaded region at point A.
     */
    function drawShadedRegion() {
        const cuspX = -A_param;
        ctx.beginPath();
        ctx.fillStyle = 'dimgray';
        ctx.moveTo(cuspX, 0);
        ctx.lineTo(cuspX + 15, 8);
        ctx.lineTo(cuspX + 15, -8);
        ctx.closePath();
        ctx.fill();
    }

    /**
     * Draws all the text labels.
     */
    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.font = 'italic 24px "Times New Roman"';

        // To draw text upright, we need to temporarily reverse the y-axis scaling.
        ctx.save();
        ctx.scale(1, -1);

        // Label O (Origin)
        ctx.fillText('O', 8, 22);

        // Label x
        ctx.fillText('x', canvasWidth / 2 - 30, 10);

        // Label y
        ctx.fillText('y', -18, -canvasHeight / 2 + 35);

        // Label A
        ctx.fillText('A', -A_param - 40, 10);

        // Label B
        ctx.fillText('B', 10, A_param + 30);
        
        // Label P
        // Position P on the curve in the second quadrant (e.g., phi = 0.8 * PI)
        const p_phi = 0.8 * Math.PI;
        const p_x = A_param * Math.pow(Math.cos(p_phi), 3);
        const p_y = A_param * Math.pow(Math.sin(p_phi), 3);
        ctx.fillText('P', p_x - 40, -p_y - 5);


        ctx.restore();
    }


    // --- Main Drawing Execution ---
    function draw() {
        // Clear canvas
        ctx.clearRect(-centerX, -centerY, canvasWidth, canvasHeight);

        drawAxes();
        drawAstroid();
        drawShadedRegion();
        drawLabels();
    }

    draw();

</script>

</body>
</html>